<%--
  Created by IntelliJ IDEA.
  User: 风间天道
  Date: 2019/6/1
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户信息</title>
    <script>
        var a = "${ctx}"
    </script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
    <script src="${ctx}/layui/layui.js"></script>
    <script src="${ctx}/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="${ctx}/layui/layui.js"></script>

<script>
    var s;
    $(function () {
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#test'
                , url: a + '/showusers'
                , cols: [[
                    {field: 'id', width: 80, title: 'ID', sort: true}
                    , {field: 'nickname', width: 80, title: '用户名'}
                    , {field: 'realname', width: 80, title: '真实姓名', sort: true}
                    , {field: 'sex', width: 80, title: '性别'}
                    , {field: 'email', title: '电子邮箱', minWidth: 150}
                    , {field: 'phone', width: 80, title: '联系电话', sort: true}
                    , {field: 'department', width: 80, title: '所属院系', sort: true}
                    , {field: 'profession', width: 80, title: '所在专业'}
                    , {field: 'classes', width: 135, title: '所在班级', sort: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , page: true
            });
            table.on('tool(test)', function (obj) {

                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么' + obj.data.id, function (index) {
                        //向服务端发送删除指令
                        $.ajax({
                            type: "POST",
                            url: a + '/deluser',
                            data: {id: obj.data.id},
                            dataType: "json",
                            success: function () {
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6})
                            },
                            error: function () {
                                layer.msg("删除失败", {icon: 5});
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "修改用户信息",
                        area: ['420px', '330px'],
                        content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单

                    });//向服务端发送修改指令
                    alert(obj.data.id);
                     s = obj.data.id;
                }
            });
        });
    });
    function update() {

        var id = s;
        var nickname = $("#nickname").val();
        var realname = $("#realname").val();
        var pwd=$("#pwd").val();
        var sex = $("#sex").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var department = $("#department").val();
        var profession = $("#profession").val();
        var classes = $("#classes").val();
        var data={
            "id":id,
            "nickname":nickname,
            "realname":realname,
            "pwd":pwd,
            "sex":sex,
            "email":email,
            "phone":phone,
            "department":department,
            "profession":profession,
            "classes":classes
        }

        $.ajax({
            type: "POST",
            url: a + '/updatemsg',
            data: data,
            dataType: "json",
            success: function () {
                alert("修改成功！");
                location.reload(true);
            },
            error: function () {
                layer.msg("修改失败", {icon: 5});
            }
        });
    }
</script>
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">

        <div class="layui-form-item"><label class="layui-form-label">用户名</label>
            <div class="layui-input-block"><input type="text" name="nickname" id="nickname"
                                                  autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block"><input type="text" name="realname" id="realname"
                                                  autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">密码</label>
            <div class="layui-input-block"><input type="text" name="pwd" id="pwd"
                                                  autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" id="sex">
                    <option>请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">邮箱</label>
            <div class="layui-input-block"><input type="email" name="email" id="email"
                                                  autocomplete="off" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">联系电话</label>
            <div class="layui-input-block"><input type="text" name="phone" id="phone"
                                                  autocomplete="off" placeholder="请输入联系电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">院系</label>
            <div class="layui-input-block">
                <select name="department" id="department">
                    <option>请选择院系</option>
                    <option value="信息技术学院">信息技术学院</option>
                    <option value="经济贸易学院">经济贸易学院</option>
                    <option value="动物科技学院">动物科技学院</option>
                    <option value="植物科技学院">植物科技学院</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">专业名</label>
            <div class="layui-input-block">
                <select name="profession" id="profession">
                    <option>请选择专业</option>
                    <option value="移动应用开发">移动应用开发</option>
                    <option value="移动应用开发（互联网方向）">移动应用开发（互联网方向）</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <select name="classes" id="classes">
                    <option>请选择班级</option>
                    <option value="移动17307班">移动17307班</option>
                    <option value="移动17308班">移动17308班</option>
                    <option value="移动17309班">移动17309班</option>
                    <option value="移动17310班">移动17310班</option>
                    <option value="移动17311班">移动17311班</option>
                    <option value="移动17312班">移动17312班</option>
                    <option value="移动17313班">移动17313班</option>
                    <option value="移动17314班">移动17314班</option>
                    <option value="移动17315班">移动17315班</option>
                    <option value="移动17316班">移动17316班</option>
                    <option value="移动18317班">移动18317班</option>
                    <option value="移动18318班">移动18318班</option>
                    <option value="移动18319班">移动18319班</option>
                    <option value="移动18320班">移动18320班</option>
                    <option value="移动18321班">移动18321班</option>
                    <option value="移动18322班">移动18322班</option>
                    <option value="移动18323班">移动18323班</option>
                    <option value="移动18324班">移动18324班</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:40px">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-submit " onclick="update();" lay-filter="submit11">确认修改</button>
                <button class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>

    </div>
</div>
</body>
</html>
